<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/common.css" />
    <link rel="stylesheet" href="./css/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/headerfooter.css">
    <script type="text/javascript" src="./script/api.js"></script>
    <script type="text/javascript" src="./script/common.js"></script>
    <script language="JavaScript" src="./script/vue.js"></script>

    <style>
        .topheader {
            display: none;
        }

        .active {
            display: block;
        }
    </style>
</head>

<body>
    <div id="indexbox">
        <header id="header">
            <div class="active topheader" id="indexheader">
                <ul class="cf-content">
                    <li class="cf-tab-item" :class="{'cur-cf-tab':tid==item.id}" v-for="item in topnav" @click="opennav($event,item.id)">
                        <span>{{item.title}}</span>
                    </li>
                </ul>
            </div>
            <div class="topheader">
                <div class="aui-bar aui-bar-nav">
                    <div class="aui-title">新品</div>
                </div>

            </div>
            <div class="topheader">
                <div class="aui-searchbar">
                    <div class="aui-searchbar-input aui-border-radius">
                        <i class="aui-iconfont aui-icon-search"></i>
                        <input type="search" @click="opensearch" placeholder="请输入搜索内容">
                    </div>
                </div>
            </div>
            <div class="topheader">
            <div class="aui-bar aui-bar-nav" id="header">
                 <div class="aui-title">发现</div>
            </div>
          </div>
            <div class="topheader"></div>
        </header>

        <footer class="aui-bar aui-bar-tab aui-hr" id="footer">
            <div class="aui-bar-tab-item color-red" @click="switchfooter(0)">
                <span class="iconfont icon-shouye"></span>
                <div class="aui-bar-tab-label">首页</div>
            </div>
            <div class="aui-bar-tab-item" @click="switchfooter(1)">
                <div class="aui-dot"></div>
                <span class="iconfont icon-xinpin"></span>
                <div class="aui-bar-tab-label">新品</div>
            </div>
            <div class="aui-bar-tab-item" @click="switchfooter(2)">
                <span class="iconfont icon-sousuo"></span>
                <div class="aui-bar-tab-label"> 搜索</div>
            </div>
            <div class="aui-bar-tab-item" @click="switchfooter(3)">
                <span class="iconfont icon-icon-yxj-discover"></span>
                <div class="aui-bar-tab-label">  发现 </div>
            </div>
            <div class="aui-bar-tab-item" @click="switchfooter(4)">
                <span class="iconfont icon-gerenzhongxinzhuyegerenziliao"></span>
                <div class="aui-bar-tab-label">个人中心 </div>
            </div>
        </footer>
    </div>
    <script>
        var footerh = $api.dom("#footer").offsetHeight;
        var frames = ['index_frame', 'newlist_frame', 'typelist_frame','dynamic_frame', 'home_frame'];
        var frames_bounces = [true,true,false,false,false];

        var pvm = new Vue({
            el: '#indexbox',
            data: {
                topnav: [],
                headerh: 0,
                tid: 0,

            },

            methods: {

                opensearch: function() {
                    $page.openwin('search', './html/product/search.html', {});
                },
                openlist: function(tid) {
                    var name = "",
                        url = "";
                    if (tid == 0) {
                        name = frames[0];
                        url = "./html/" + name + ".html";
                    } else {
                        name = "product_toplist_frm" + tid;
                        url = './html/product/toplist_frame.html';
                    }
                    var headerh = $api.dom("header").offsetHeight;
                    $page.openfrm(name, url, {
                            x: 0,
                            y: pvm.headerh,
                            h: api.frameHeight - headerh - footerh
                        }, {
                            tid: tid
                        },true
                        );

                },
                opennav: function(e, tid) {
                    this.tid = tid;
                    pvm.openlist(tid);
                    // $page.switchnav(e, 'cur-cf-tab');
                    var typeinfo = {};
                    var framename = '';
                    for (var i = 0; i < this.topnav.length; i++) {
                        typeinfo = this.topnav[i];
                        if (typeinfo.id != tid) {

                            framename = typeinfo.id == 0 ? 'index_frame' : 'toplist' + typeinfo.id;

                            api.setFrameAttr({
                                name: framename,
                                hidden: true
                            });
                        }
                    }

                },
                switchfooter: function(index, param, reload) {
                    var header = $api.byId("header");
                    var footer = $api.byId("footer");
                    var headers = $api.domAll(header, ".topheader");
                    var footers = $api.domAll(footer, '.aui-bar-tab-item');
                    param = param || {};
                    reload = reload || false;

                    for (var i = 0; i < headers.length; i++) {
                        if (i == index) {
                            $api.addCls(headers[i], 'active');
                            $api.addCls(footers[i], 'color-red');
                        } else {
                            $api.removeCls(headers[i], 'active');
                            $api.removeCls(footers[i], 'color-red');
                            api.setFrameAttr({
                                name: frames[i],
                                hidden: true
                            });
                        }
                    }
                    if (index == 0) this.tid = 0;
                    y = $api.dom("header").offsetHeight;
                    $page.openfrm(frames[index],
                        './html/' + frames[index] + ".html", {
                            x: 0,
                            y: y,
                            h: api.winHeight - footerh - y
                        }, param, frames_bounces[index], reload);

                },

                loadinit: function() {
                    $page.get_data('/api/product/getTypeLevelList', 'post', {
                        tid: 0
                    }, function(ret) {
                        pvm.topnav = ret.data;
                        pvm.topnav.unshift({
                            id: 0,
                            title: '首页'
                        });
                        pvm.headerh = $api.dom("header").offsetHeight;
                        pvm.switchfooter(0);
                    });
                    $page.get_data('/api/product/getSearchHistory', 'post', {
                        'limit': 10
                    }, function(ret) {
                        pvm.hisword = ret.data;
                    });
                    $page.get_data('/api/diy/getContentList', 'post', {
                        'placeid': 4
                    }, function(ret) {
                        pvm.hotword = ret.data;
                    });
                }

            }
        });
        apiready = function() {
            $page.init();
            pvm.loadinit();
             
closeapp();
        }
    </script>


</body>


</html>
